<template>
  <div class="group-overview-comp">
    <div class="title-content">
      <p class="title">项目总览</p>
    </div>
    <div class="search-container">
      <div class="input-container">
        <el-input
          placeholder="输入项目名称"
          v-model="searchValue"
          @blur="handleSearch"
          @keydown.native.enter="handleSearch">
        </el-input>
        <span @click="handleSearch"><i class="el-icon-search"></i></span>
      </div>
    </div>
    <p class="project-title">项目列表</p>
    <ul class="list-container">
      <li class="link list-item">
        <a href="https://work.zmwxy.cn/" target="_blank">高空作业驾驶舱</a>
      </li>
      <li
        v-for="item in projectList"
        :class="['list-item', active === item.projectId ? 'active' : '']"
        :key="item.projectId"
      >
        <span class="name" @click="handleClick(item)">
          {{ item.projectAbbreviation || item.projectName }}
        </span>
      </li>
    </ul>
    <div class="project-echarts">
      <Histogram :options="options"></Histogram>
    </div>
    <div class="project-detail">
      <div class="investment">
        <div class="detail-top">
          <p class="num">10,000,000</p>
          <p class="unit">万元</p>
        </div>
        <span class="detail-bottom">总投资</span>
      </div>
      <div class="real-name">
        <div class="detail-top">
          <p class="num">34789</p>
          <p class="unit">人</p>
        </div>
        <span class="detail-bottom">实名制</span>
      </div>
      <div class="other">
        <div class="item">
          <span>塔吊</span>
          <span class="num">500台</span>
        </div>
        <div class="item">
          <span>升降机</span>
          <span class="num">500台</span>
        </div>
        <div class="item">
          <span>监控</span>
          <span class="num">500台</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Histogram from '@/components/echarts/base';

export default {
  components: {
    Histogram,
  },
  props: {},
  data() {
    return {
      // 当前选择项
      active: null,
      // 项目搜索值
      searchValue: '',
      // 项目列表数据
      projectList: [],
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          bottom: 30
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: ['全国在建项目', '全国完成项目']
        },
        yAxis: {
          type: 'value',
          // 轴线
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            data: [200, 40],
            barWidth: 60,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  {
                    offset: 0,
                    color: '#1740d8'
                  }, {
                    offset: 0.5,
                    color: '#5f7ffb'
                  }
                ]
              )
            },
            label: {
              position: 'top',
              formatter: function (option) {
                const value = option && option.value;
                return value + '个';
              },
              show: true,
              fontWeight: 'bold',
              fontSize: 14,
              color: '#fff'
            }
          }
        ]
      }
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo || {};
    }
  },
  created() {
    this.getProjectByUser();
  },
  methods: {
    // 获取项目列表数据
    async getProjectByUser(options = {}) {
      if (!this.userInfo.uuid) return;
      const params = {
        userId: this.userInfo.uuid,
        ...options
      };
      const { success, data: {
        data
      }} = await this.$Model.getUserProject(params);
      if (success && data) {
        this.projectList = data;
      }
    },
    /**
     * 搜索项目
     */
    handleSearch() {
      this.getProjectByUser({
        condition: this.searchValue || ''
      });
    },
    /**
     * 选择项目
     * @param {Object} item 当前项目数据
     */
    handleClick(item) {
      this.active = item.projectId;
      this.$setLocalStorage('projectId', this.active);
      this.$store.commit('updateCurrentProjectId', this.active);
      this.$store.commit('updateCurrentProjectInfo', item);
      this.$store.commit('updateHasToProject', false);
      // 进入对应项目
      this.$router.push('/project');
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../../assets/styles/main';

.group-overview-comp {
  width: 100%;
  color: #fff;
  .title-content {
    height: 30px;
    overflow: hidden;
    text-align: left;
    margin-bottom: 20px;
  }
  .title {
    width: calc(100% - 10px);
    background: linear-gradient(to right, #18235f, #414d96);
    padding: 5px 15px;
    font-size: 15px;
    border-radius: 10px 13px 0 10px;
    margin-bottom: 20px;
    color: $mainColor;
    position: relative;
    display: inline-block;
    &:after {
      content: '';
      position: absolute;
      right: -14px;
      top: 11px;
      width: 0;
      height: 0;
      border-width: 5px 16px;
      border-style: solid;
      border-color: #414d96 #414d96 transparent transparent;
      border-radius: 15px 6px 0 0;
      z-index: 1;
      transform: rotate(65deg);
    }
  }
  .search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .input-container {
      width: 100%;
      height: 40px;
      display: flex;
      .el-input {
        width: calc(100% - 45px);
        /deep/ input {
          background: $inputBgRbga;
          border-radius: 5px;
          border: none;
          color: #fff;
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }
      }
      > span {
        width: 40px;
        height: 40px;
        background-color: rgb(56, 56, 96);
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
        cursor: pointer;
        &:hover {
          background-color: rgba(56, 56, 96, .8);
        }
      }
      .el-icon-search {
        font-size: 22px;
      }
    }
    .el-button {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      i {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
  .project-title {
    font-size: 15px;
    margin: 20px 0 10px;
    color: $mainColor;
  }
  .list-container {
    font-size: 15px;
    width: 100%;
    height: 200px;
    overflow: auto;
    cursor: pointer;
    .list-item {
      color: #fff;
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all .3s;
      border-bottom: 1px solid $mainBorder;
      &.active, &:hover {
        color: $lightBtnBg;
        border-bottom: 1px solid $lightBtnBg;
        i {
          background-color: rgba(56, 56, 96, .8);
        }
      }
      .name {
        height: 100%;
        display: flex;
        align-items: center;
        text-align: left;
        width: 100%;
        flex: 1;
      }
      i {
        margin: 0 2px;
        padding: 5px;
        background-color: rgb(56, 56, 96);
        border-radius: 5px;
        cursor: pointer;
      }
      &.link {
        a {
          color: #fff;
          display: block;
          width: 100%;
          &:hover {
            color: $lightBtnBg;
          }
        }
      }
    }
  }
  .project-echarts {
    width: 100%;
    height: 140px;
  }
  .project-detail {
    width: 100%;
    height: 140px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    .detail-top {
      width: 100%;
      height: 95px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(135deg, #1a2460 10%, #44509a);
    }
    > div {
      width: 130px;
      height: 130px;
      &.investment, &.real-name {
        .detail-top {
          padding: 0 10px;
          line-height: 24px;
          border-radius: 10px 10px 0 0;
          .num {
            width: 100%;
            font-size: 18px;
          }
          .unit {
            width: 100%;
            line-height: 18px;
            color: $mainColor;
          }
        }
        .detail-bottom {
          display: inline-block;
          height: 35px;
          width: 100%;
          background-color: #18225e;
          color: $mainColor;
          border-radius: 0 0 10px 10px;
          line-height: 35px;
          text-align: center;
        }
      }
      &.other {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .item {
          width: 100%;
          height: 40px;
          display: flex;
          padding: 0 10px;
          align-items: center;
          justify-content: space-between;
          border-radius: 10px;
          background: linear-gradient(to right, #1a2460 5%, #44509a);
          span {
            font-size: 15px;
            color: $mainColor;
            &.num {
              color: #fff;
            }
          }
        }
      }
    }
  }
  @media screen and (max-height: 980px) {
    .list-container {
      height: 150px;
      .list-item {
        height: 40px;
      }
    }
  }
}
</style>
